<template>
	<div class="backBb">
		<navTop></navTop>
		<div class="headtop" :style="{width:(screenWidth>=1400?'1400px':'1200px')}">
			{{title}}
			<span @click="$router.push('/markingexamlist')">返回</span>
		</div>
		<div class="brandXie" :style="{width:(screenWidth>=1400?'1400px':'1200px')}">
			<div style="width:200px">
				<el-row class="tac">
				  <el-col :span="24">
				    <el-menu
				      class="el-menu-vertical-demo"
					  router 
					  :default-active="activeIndexrouter"
				      @open="handleOpen"
				      @close="handleClose">
				      <el-submenu index="/progressstatistics/reportprogress">
							<template slot="title">
							  <span>进度统计</span>
							</template>
							<el-menu-item :index="'/progressstatistics/reportprogress?type='+$route.query.type+'&navid='+$route.query.navid+'&title='+$route.query.title">上报信息统计</el-menu-item>
							<el-menu-item :index="'/progressstatistics/answerprogress?type='+$route.query.type+'&navid='+$route.query.navid+'&title='+$route.query.title">答卷扫描统计</el-menu-item>
							<el-menu-item :index="'/progressstatistics/gradingprogress?type='+$route.query.type+'&navid='+$route.query.navid+'&title='+$route.query.title">阅卷进度统计</el-menu-item>
				      </el-submenu>
					  <el-submenu index="2">
							<template slot="title">
							  <span>功能管理</span>
							</template>
							<el-menu-item :index="'/progressstatistics/processmanagement?type='+$route.query.type+'&navid='+$route.query.navid+'&title='+$route.query.title">流程管理</el-menu-item>
							<el-submenu index="">
								<template slot="title">分配任务</template>
								<el-menu-item v-for="item in xkexamlist" :key="item.id" :index="'/progressstatistics/taskmanage?type='+$route.query.type+'&navid='+$route.query.navid+'&title='+$route.query.title+'&xkid='+item.id">{{item.name}}</el-menu-item>
							</el-submenu>
					  </el-submenu>
					  <!-- <el-menu-item :index="'/progressstatistics/scoredownload?type='+$route.query.type+'&navid='+$route.query.navid+'&title='+$route.query.title">
						  <span slot="title">导出成绩</span>
					  </el-menu-item> -->
					  <!-- <el-submenu index="3">
							<template slot="title">
							  <span>成绩数据</span>
							</template>
							<el-menu-item :index="'/progressstatistics/scoreAnalysisSettings?type='+$route.query.type+'&navid='+$route.query.navid+'&title='+$route.query.title">成绩分析设置</el-menu-item>
							<el-menu-item :index="'/progressstatistics/gradeInformation?type='+$route.query.type+'&navid='+$route.query.navid+'&title='+$route.query.title">联考成绩信息</el-menu-item>
							<el-menu-item :index="'/progressstatistics/downloadGrades?type='+$route.query.type+'&navid='+$route.query.navid+'&title='+$route.query.title">下载成绩</el-menu-item>
							<el-menu-item :index="'/progressstatistics/operationAnswerSheet?type='+$route.query.type+'&navid='+$route.query.navid+'&title='+$route.query.title">操作答题卡</el-menu-item>
					  </el-submenu> -->
				    </el-menu>
				  </el-col>
				</el-row>
			</div>
			<div class="selectExamContain">
				<router-view></router-view>
			</div>
		</div>
	</div>
</template>

<script>
	import {decrypt} from '../../utils/cryptojs'
	import navTop from "../../components/head.vue"
	import { EventBus } from "../../utils/event-bus.js";
	import {hqexamlist} from '../../api/api.js'
	export default{
		data(){
			return{
				formInline: {
					user: '',
					region: '',
					classify:''
				},
				examlist:[],
				isLogin:{},
				screenWidth:'',	
				uniqueopened:true,
				title:'',
				xkexamlist:[],
				activeIndexrouter:''
			}
		},
		mounted() {
			// let params={id:113440}
			// scoreGetnavs(params).then(res=>{
			// 	console.info(res)
			// })
			this.screenWidth = document.body.clientWidth
			let userinfo=localStorage.getItem('accessToken')
			const decryptData = decrypt(userinfo)  
			this.isLogin = JSON.parse(decryptData)
			this.title=this.$route.query.title
			this.nav5id=this.$route.query.navid
			this.taskNavxk(this.$route.query.navid)
			this.activeIndexrouter = decodeURI(this.$route.fullPath)
		},
		methods:{
			// 获取分配任务的学科
			taskNavxk(id){
				let params = {
					pId:id
				}
				hqexamlist(params).then(res=>{
					if(res.code==0){
						this.xkexamlist = res.results
					}else{
						this.$message({
							type: 'error',
							message: res.msg
						}); 
					}
				})
			},
			handleOpen(key, keyPath) {
				console.log(key, keyPath);
				this.activeIndexrouter = key
			},
			handleClose(key, keyPath) {
				console.log(key, keyPath);
			},
			lookprogress(){
				this.$router.push('/totalmarkingprogress')
			},
			allocationFp(){
				this.$router.push('/taskallocation')
			},
			selectexam(type,navid,title){
				this.$router.push('/index?type='+type+'&navid='+navid+'&title='+title)
			},
			onSubmit(){
				
			}
		},
		components:{navTop}
	}
</script>

<style scoped>
	.headtop{
		box-sizing: border-box;
		background:#fff;
		margin:0 auto;
		border-radius:5px;
		padding:20px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size:16px;
		margin-top:20px;
	}
	.headtop span{
		background:#5677FB 100%;
		display: inline-block;
		padding:8px 20px;
		border-radius:5px;
		color:#fff;
		cursor: pointer;
		font-size:14px;
	}
	.backBb{
		background:#eee;
	}
	.brandXie{
		padding:20px;
		margin:0 auto;
		display: flex;
		justify-content:space-between
	}
	.selectExamContain{
		box-sizing: border-box;
		background:#fff;
		height:calc(100vh - 215px);
		width:calc(100% - 220px);
		overflow-x:hidden;
		overflow-y:auto;
	}
	.examTitle{
		padding:20px;
		font-weight:normal
	}
	.formContent{
		padding:20px 20px 0 20px;
	}
	.mainContent{
		background:#eceff3;
		padding:15px 0 15px;
		min-height: 87.7vh;
	}
	.maincon{
		box-sizing: border-box;
		width:1400px;
		background:#fff;
		margin:15px auto 0;
		padding:15px;
	}
	.maincon h3{
		font-size:16px;
		font-weight:normal;
		padding-top:10px;
	}
	.formInput{
		padding:20px 0;
	}
	.formInput >>> .el-select{
		margin-right:15px;
	}
	.formInput >>> .el-button--primary{
		background:#619CF5;
	}
	.paginationBox >>> .el-pagination.is-background .el-pager li:not(.disabled).active{
		background:#619CF5;
	}
	.listContent li{
		padding:10px 17px 20px;
		border:solid 1px #ccc;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom:15px;
		cursor: pointer;
	}
	.listContent li h3{
		font-size:18px;
		font-weight:normal;
		display: flex;
		align-items: center;
	}
	.listContent li h3 span{
		background:#619CF5;
		color:#fff;
		width:66px;
		font-size:14px;
		color:#fff;
		height:26px;
		line-height:26px;
		border-radius:4px;
		margin-right:10px;
		text-align: center;
	}
	.listContent li p{
		padding-top:18px;
		display: flex;
	}
	.listContent li p b{
		font-size:14px;
		font-weight:normal;
		color:#999;
		margin-right:60px;
	}
	.listContent li button{
		margin-left:40px;
		background:#619CF5;
	}
	.listContent li:hover{
		border:solid 1px #007AFF
	}
	.paginationBox{
		text-align: center;
		padding:40px 0 60px;
	}
	.emptyBox{
		background:#eceff3;
		height:calc(100vh - 80px);
		position:relative
	}
	.emptyBox p{
		position:absolute;
		left:50%;
		top:40%;
		transform:translate(-50%,-50%);
		text-align:center;
	}
	.emptyBox p span{
		display:block;
		padding-top:30px;
	}
	.selectboxlist{
		box-sizing: border-box;
		background:#fff;
		margin:15px 0;
		line-height:60px;
		padding:0 25px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin:0 auto;
	}
	.selectboxlist span{
		width: 80px;
		height: 38px;
		background: #3874FF;
		border-radius: 6px;
		color:#fff;
		line-height:38px;
		text-align: center;
		cursor: pointer;
	}
	.selectboxlist p{
		display: flex;
		font-size:16px;
	}
	.selectboxlist p b{
		padding-right:80px;
		cursor: pointer;
	}
	.selectboxlist p b.hover{
		color:#3874FF
	}
	.examlist{
		height:calc(100vh - 240px);
		overflow-x: hidden;
		overflow-y: auto;
		padding:0 30px;
	}
	/*滚动条区域*/
	.examlist::-webkit-scrollbar{
	  width:5px;
	  background-color:#fff;
	}
	/*滚动条*/
	.examlist::-webkit-scrollbar-thumb{
	  background-color:#4076DD;
	  border-radius:50px;
	}
	/*滚动条外层轨道*/
	.examlist::-webkit-scrollbar-track {
	    /* -webkit-box-shadow: inset 0 0 1px ; */
	    background-color:#eee;
	    border-radius: 50px;
	}
	.examlistbox{
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		padding:20px 15px 10px;
		border:solid 1px #C1C3C6;
		align-items: center;
		margin-bottom:23px;
	}
	.examlistbox >>> .el-button{
		width: 124px;
		height: 44px;
		border-radius: 6px;
		border: 1px solid #3874FF;
		color:#3874FF;
		font-size: 18px;
		line-height:44px;
		margin-right:20px;
		cursor: pointer;
		background:none;
		padding:0;
	}
	.elsconlist{
		cursor: pointer;
		margin-bottom:20px;
		width: 45%;
	}
	.examlistbox:hover{
		box-shadow: 0px 4px 10px 0px rgba(56,116,255,0.21);
		border: 1px solid #3874FF;
	}
	.elsconlistTitle{
		font-size:20px;
		display: flex;
		align-items: center;
	}
	.elsconlistTitle span{
		display: inline-block;
		width: 82px;
		height: 32px;
		background: #3874FF;
		border-radius: 4px;
		font-size:16px;
		color:#fff;
		text-align: center;
		line-height:32px;
		margin-right:10px;
	}
	.elsconlistTime{
		display: flex;
		font-size:14px;
		color:#989899;
		padding-top:18px;
		width:120%;
	}
	.elsconlistTime span{
		display:block;
		width:80%
	}
	.elsconlistProgress{
		display: flex;
		padding-top:20px;
		align-items: center;
		font-size:14px;
		color:#989899;
	}
	.elsconlistProgress ul{
		display: flex;
		align-items: center;
	}
	.elsconlistProgress ul li{
		box-sizing: border-box;
		text-align: center;
		color:#101010;
		margin-right:5px;
		width: 80px;
		height: 26px;
		line-height:26px;
		border-radius: 16px 0px 16px 0px;
		border: 1px solid #979797;
	}
	.elsconlistProgress ul .state1{
		background:#48D67B;
		border:solid 1px #48D67B;
		color:#fff;
	}
	.elsconlistProgress ul .state2{
		background:#6B8DF0;
		border:solid 1px #6B8DF0;
		color:#fff;
	}
	.elsconlistProgress ul .state3{
		background:#E9B573;
		border:solid 1px #E9B573;
		color:#fff;
	}
</style>